<!DOCTYPE html>
<html ng-app="indexApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/sweetalert2.css" rel="stylesheet">
    <style>
        .data-viewer {
            font-family: "courier new", arial, sans-serif;
            font-size: 12px;
        }

        .focus {
            background-color: #00AEAE;
            color: #FFFFFF;
        }
    </style>

    <script src="js/angular/1.6.3/angular.js"></script>
    <script src="js/angular/1.6.3/angular-route.js"></script>
    <script src="js/angular/1.6.3/angular-ui-router.js"></script>
    <script src="js/angular/1.6.3/angular-file-upload.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/sweetalert.min.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="js/ie-emulation-modes-warning.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.min.js"></script>
    <script src="ng/indexApp.js"></script>
    <script src="ng/predictData.js"></script>
    <title>数据集预测分析</title>
</head>
<body ng-controller="predictData">
<div class="container-fluid">
    <div class="" style="height: 20px"></div>
    <span class="btn-info btn-sm " style="display: inline-block"  disabled="">任务管理
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">数据集
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">数据预处理
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">数据建模
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="background-color: #00a4e7;display: inline-block">预测分析
    </span>
    <h3 class="page-header" style="">预测分析
        <a type="button" style = "float: right"
           class="btn btn-info btn-sm"
           href="MLdataPRE.html" style="width: 50%"><span class="glyphicon glyphicon-arrow-left"></span>&nbsp;数据预处理
        </a>
        <a type="button"
           class="btn btn-info btn-sm" style="float: right;margin-right: 5px"
           href="ana-task-create-manage.html"><span class="glyphicon glyphicon-arrow-left"></span>&nbsp;任务管理
        </a>
    </h3>
    <div class="row">
        <div class="col-sm-8 col-md-8">
            <div class="alert alert-info alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>说 明</strong> 选择模型对数据集进行预测分析。
            </div>
        </div>
    </div>

    <!-- 任务列表 -->
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">模型列表</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8">
                            <input type="text" class="form-control" placeholder="任务ID" ng-model="searchParam"
                                   style="width: 50%;display: inline;padding-bottom: 10px">
                            <button class="btn btn-info search-btn" ng-click="searchTask()">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </div>
                        <div class="col-md-2 col-md-offset-2">

                            <button type="button" class="btn btn-sm btn-default btn-block"
                                    ng-click="getAllTasks()" >
                                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-12" style="max-height:350px;overflow:auto">
                            <table
                                    class="table table-bordered table-striped table-condensed table-hover"
                                    ng-init="getAllTasks()">
                                <thead>
                                <tr class="default">
                                    <th>No</th>
                                    <th>任务ID</th>
                                    <th>模型类型</th>
                                    <th>模型名</th>
                                    <th>创建时间</th>
                                    <th>完成时间</th>
                                    <th>训练数据集</th>
                                    <th>创建人</th>
                                    <th colspan="2">操 作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="task in taskList" ng-click="showTaskInfo(task)">
                                    <td ng-class='{focus: task[0]==focus}'>{{task[0]}}</td>
                                    <td>{{task[1]}}</td>
                                    <td>{{task[2]}}</td>
                                    <td>{{task[3]}}</td>
                                    <td>{{task[4]}}</td>
                                    <td>{{task[5]}}</td>
                                    <td>{{task[6]}}</td>
                                    <td>{{task[7]}}</td>
                                    <td>
                                        <button type="button"
                                                class="btn btn-xs btn-block"
                                                style="background-color: #dbe8f1;float: right"
                                                ng-click="selectTask(task)">选择模型
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <!--
                        <div class="col-md-1">
                            <div class="form-group form-group-sm">
                                <button type="button" class="btn btn-sm btn-block btn-default"
                                        ng-click="">
                                    <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                </button>
                            </div>
                        </div>
                        -->
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">参数配置</div>
                <div class="panel-body">
                    <form class="form-horizontal">

                        <div class="form-group form-group-sm">
                            <label class="col-sm-2 control-label">参数</label>
                            <div class="col-md-9">
									<textarea class="form-control"
                                              rows="4" placeholder="模型训练参数"
                                              ng-model="taskConf" readonly
                                              style="font-family: 'Courier New', Courier, monospace;"></textarea>
                                <button type="button" class="btn btn-success"
                                        style="float: right;margin-top: 10px;"
                                        ng-click="predictLable()">
                                    <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> 预测
                                </button>
                            </div>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>




    <div class="row" ng-show="taskOuputDivVisible">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">预测输出</div>
                <div class="panel-body">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="panel panel-default">
                                <div class="panel-heading">预测结果数据集样例</div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-condensed table-hover">
                                                    <caption>预处理数据表 {{currentMySQLTablePre.name}} 的数据样例</caption>
                                                    <thead>
                                                    <tr>
                                                        <th>No</th>

                                                        <th ng-repeat="key in tableItemPre"
                                                            ng-style="{'background-color':key=='PREDICT_LABEL'?'#ff090c':''}"
                                                            style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                            {{key}}
                                                        </th>

                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr ng-repeat="item in mysqlTableSampleDataPre">
                                                        <td>{{$index+1}}</td>
                                                        <td ng-repeat="key in countItemPre"
                                                            ng-style="{'background-color':key==0 ?'#ff090c':''}"
                                                            style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                            {{item[key]|limitTo:10}}
                                                        </td>
                                                    </tr>
                                                    <tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">图表分析</div>
                            <div class="panel-body">
                                <div class="col-md-12">
                                    <div id="3DChart" style="width: 1000px;height:450px;" ></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



</div>
</body>
</html>